<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        section{
            width: 300px;
            height: 300px;
            /* border: 1px solid red; */
            margin: 100px auto 0;
            position: relative;
            transform: rotateX(90deg) rotateY(90deg);
            transform-style: preserve-3d;
            transition: 4s ;
            /* transform: rotateY(90deg); */
            transform-origin:center center;
            animation: move 4s linear infinite;
        }
        div{
            width: 300px;
            height: 300px;
            position: absolute;
            background: rgb(224, 32, 32);
            text-align: center;
            line-height: 300px;
        }
        div:nth-child(1){
            background-color: rgba(131, 131, 131,0);
        }
        div:nth-child(2){
            transform: translateZ(-150px);
            background-color: rgba(111, 224, 45, 0.4);
        }
        
        div:nth-child(3){
            transform: translatex(-150px) rotateY(90deg);
            background-color: rgba(40, 188, 214, 0.4);
        }
        div:nth-child(4){
            transform: translatex(150px) rotateY(90deg);
            background-color: rgba(11, 46, 141,0.4);
        }
        div:nth-child(5){
            transform: translatey(-150px) rotateX(90deg);
            background-color: rgba(197, 22, 81, 0.4);
        }
        div:nth-child(6){
            transform: translatey(150px) rotateX(90deg);
            background-color: rgba(219, 223, 16, 0.4);
        }
        div:nth-child(7){
            transform: translateZ(150px);
            background-color: rgba(163, 223, 24, 0.4);
        }
        section:hover{
            transform: rotatey(360deg);
        }
        @keyframes move{
            from{
                transform: rotatey(360deg);
            }
            to{
                transform: rotatey(0deg);
            }
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </section>
</body>
</html>